<template>
	<view class="conter">
		<view class="bbmons">
			<view class="container">
				<!-- 头像 -->
				<view class="box1" @click="Modify">
					<view class="">头像</view>
					<view class="namehead">
						<u--image width="56rpx" height="56rpx" radius='50%'
							style="margin-right: 25rpx;" :src="avatarImg" alt=""></u--image>
						<u-icon class="icon" name="arrow-right" style="margin-top: 10rpx" color="#fff" bold
							size="13"></u-icon>
					</view>
				</view>
				<!-- 昵称 -->
				<view class="box1" @click="toNickname">
					<view class="">昵称</view>
					<view class="name">
						<view style="margin-right: 32rpx;">
							{{ nickName }}
						</view>
						<u-icon class="icon" name="arrow-right" style="margin-top: 10rpx; " color="#fff" bold
							size="13"></u-icon>
					</view>
				</view>
				<!-- 登录密码 -->
				<view class="box1" @click="Password">
					<view class="">登录密码</view>
					<u-icon class="icon" name="arrow-right" style="margin-top: 10rpx" color="#fff" bold
						size="13"></u-icon>

				</view>
				<!-- 绑定手机号 -->
				<view class="box1">
					<view class="">绑定手机号</view>
					<view class="name">
						<view class="name" style="margin:0rpx 5rpx 0 0;
						width: 185rpx;
						">
							{{ phone }}
						</view>
						<u-icon class="icon" name="arrow-right" style="margin-top: 10rpx" color="#fff" bold
							size="13"></u-icon>
					</view>
				</view>
				<view class="box1" @click="nodata">
					<view class="">忘记密码？</view>
					<u-icon class="icon" name="arrow-right" style="margin-top: 10rpx" color="#fff" bold
						size="13"></u-icon>
				</view>
				<view class="box1" @click="gosafecode">
					<view class="">安全密码</view>
					<u-icon class="icon" name="arrow-right" style="margin-top: 10rpx" color="#fff" bold
						size="13"></u-icon>
				</view>
				<view class="box1" @click="info">
					<view class="">实名认证</view>
					<u-icon class="icon" name="arrow-right" style="margin-top: 10rpx" color="#fff" bold
						size="13"></u-icon>
				</view>
				<!-- <view class="box1" @click="showClear = true">
					<view class="">清除缓存</view>
					<u-icon class="icon" name="arrow-right" style="margin-top: 10rpx" color="#fff" bold
						size="13"></u-icon>
				</view>
				<view class="box1" @click="nodata">
					<view class="">会员中心</view>
					<u-icon class="icon" name="arrow-right" style="margin-top: 10rpx" color="#fff" bold
						size="13"></u-icon>
				</view>
				<view class="box1" @click="Shipping">
					<view class="">收货地址</view>
					<u-icon class="icon" name="arrow-right" style="margin-top: 10rpx" color="#fff" bold
						size="13"></u-icon>
				</view> -->
			</view>
		</view>
		<u-popup bgColor='transparent' :show="showClear" :round="26" mode="center">
			<view class="close">
				<view class="clmon">清除缓存</view>
				<view class="clmonss">是否确定清除缓存？</view>
				<view class="clpmklj">
					<button v-on:click="showClear = false">取消</button>
					<button @click="clearCache">确定</button>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		uploadAvatar
	} from '@/api/account/account.js';
	import config from '@/config';
	import {
		getToken,
		getUserAdmin,
		setUserAdmin,
		removeUserAdmin
	} from '@/utils/auth';
	import cryptoUtils from '@/utils/cryptoUtils'; //引入静态变量
	import {
		toast,
		showConfirm,
		tansParams
	} from '@/utils/common';

	import {
		filterPhone
	} from '@/utils/filter.js';
	import {
		getInfo
	} from '@/api/login.js';

	const baseUrl = config.baseUrl;
	const imgUrl = config.imgUrl;
	// 组件路径
	export default {
		created() {
			this.getUserDetail();
		},
		onShow() {
			this.getUserDetail();
		},
		data() {
			return {
				avatarImg: '', //头像地址
				nickName: '', // 用户昵称
				phone: '', //手机号
				password: '', //密码，修改密码页面使用
				systemId: '', //修改密码使用到的id
				userId: '', //用户id
				showClear: false, //清除缓存弹窗
				content: '确认要清除缓存吗?'
			};
		},
		methods: {
			//清除缓存
			clearCache() {
				removeUserAdmin();
				toast('清除成功');
				this.showClear = false;
				let _this = this;
				setTimeout(function() {
					_this.getUserDetail();
				}, 1000);
			},
			nodata() {
				toast('暂未开放');
			},
			// 获取用户信息
			getUserDetail() {
				let detail = getUserAdmin();
				if (detail) {
					this.avatarImg = imgUrl + detail.avatar;
					this.nickName = detail.nickname;
					this.phone = filterPhone(detail.phone);
					this.password = detail.systemUser.password;
					this.systemId = detail.systemUser.id;
					this.userId = detail.id;
				} else {
					//不为真的情况需要调用获取用户信息接口,存储完之后再次调用自己
					this.refreshUserInfo();
				}
			},
			// 刷新缓存
			refreshUserInfo() {
				getInfo().then((res) => {
					setUserAdmin(res.data);
				});
			},

			// 选择相册或者拍摄,并上传
			onChooseHeader() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册和拍照
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: baseUrl + '/uploadController/open/ossUploadCustomizeFileName',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								folderName: 'avatar'
							},
							header: {
								Authorization: getToken()
							},
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data);
								res.data = cryptoUtils.decrypt(res.data);
								if (res.code == 200) {
									if (res.data[0]) {
										this.avatarImg = imgUrl +
											'https://bbmon.oss-cn-beijing.aliyuncs.com/avatar' +
											res.data[0];
										// console.log(this.avatarImg);
									}
								} else {
									toast(res.msg);
								}
							}
						});
					}
				});
			},
			Modify() {
				uni.navigateTo({
					url: '/pages/AccountSecurity/avatar/index?avatarImg=' + this.avatarImg
				});
			},
			gosafecode() {
				uni.navigateTo({
					url: '/pages/AccountSecurity/safecode/safecode'
				});
			},
			toNickname() {
				uni.navigateTo({
					url: '/pages/AccountSecurity/Nickname/Nickname?nickname=' + this.nickName
				});
			},
			Shipping() {
				uni.navigateTo({
					url: '/pages/AccountSecurity/Shipping/Shipping'
				});
			},
			Password() {
				uni.navigateTo({
					url: '/pages/AccountSecurity/pwd/index?password=' + this.password + '&systemId=' + this
						.systemId
				});
			},
			info() {
				uni.navigateTo({
					url: '/pages/AccountSecurity/info/index?userId=' + this.userId
				});
			}
		}
	};
</script>

<style lang="scss">
	::v-deep .u-popup__content {
		width: 500rpx;
		height: 350rpx;
		background: #0d0e11;
		box-shadow: 0rpx 9rpx 26rpx 0rpx rgba(0, 0, 0, 0.35);
		border-radius: 26rpx;
		opacity: 1;
	}

	.name {
		display: flex;
	}

	.box {
		border-bottom: none !important;
	}

	.box1 {
		width: 680rpx;
		height: 110rpx;
		border-bottom: 0.5rpx solid rgba(255, 255, 255, 0.1);
		text-align: center;
		line-height: 70rpx;
		margin: 0 34rpx;
		// background-color: pink;
		display: flex;
		font-size: 28rpx;
		font-family: "font";
		font-weight: 500;
		color: #ffffff;
		justify-content: space-between;
		padding: 20rpx 30rpx;

		.namehead {
			display: flex;
			width: 56rpx;
			height: 56rpx;
			opacity: 1;
			margin-right: 50rpx;
			border-radius: 50%;
			position: relative;

			img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				object-fit: cover;
				// margin-top: 10rpx;
				margin-right: 20rpx;
			}
		}
	}

	.clpmklj {
		display: flex;
		margin: 40rpx 0;
		button:nth-child(2) {
			width: 180rpx;
			height: 78rpx;
			background: linear-gradient(90deg, #3ADFEB 0%, #4463FF 100%);
			border-radius: 16rpx;
			font-size: 31rpx;
			line-height: 83rpx;
			font-family: "font";
			font-weight: 800;
			color: #ffffff;
		}

		button:nth-child(1) {
			width: 180rpx;
			height: 78rpx;
			background: gray;
			border-radius: 16rpx;
			line-height: 83rpx;
			font-size: 31rpx;
			font-family: "font";
			font-weight: 800;
			color: #ffffff;
		}
	}

	.close {
		position: absolute;
		width: 500rpx;
		height: 350rpx;
		background: #0d0e11;
		box-shadow: 0rpx 9rpx 26rpx 0rpx rgba(0, 0, 0, 0.35);
		border-radius: 26rpx;
		opacity: 1;
		border: 2rpx solid #8a92a3;

		.clmon {
			font-size: 40rpx;
			font-family: "font";
			font-weight: 800;
			color: #ffffff;
			text-align: center;
			margin: 52.33rpx 0;
		}

		.clmonss {
			font-size: 28rpx;
			font-family: "font";
			font-weight: 400;
			color: #8a92a3;
			text-align: center;
		}
	}
</style>